<template>
  <div class="news-detail">
    <!-- 面包屑 -->
    <div class="bread-crumb container">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>{{ $t("yunLianUsedMachine") }}</el-breadcrumb-item>
        <el-breadcrumb-item to="/news">{{ $t("news") }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ articleDetail.categoryName == "1" ? $t("industryNews") : $t("transactionCase") }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 图文详情 -->
    <div class="container">
      <div class="article-title">{{ articleDetail.title }}</div>
      <div class="artInfo-info-share">
        <div class="artInfo">
          <div class="view-area">
            <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/time.png" />
            <span>{{ $t("time") }}：</span>
            <span>{{ articleDetail.releaseTime }}</span>
          </div>
          <div class="view-area margin-l">
            <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/hit.png" />
            <span>{{ $t("hits") }}：</span>
            <span>{{ articleDetail.viewCount }}</span>
          </div>
        </div>
        <div class="info-share" v-if="locale == 'en-US'">
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/facebook.png" alt="facebook" @click="mediaShare('facebook')" />
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/twitter.png" alt="twitter" @click="mediaShare('twitter')" />
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/linkedin.png" alt="linkedin" @click="mediaShare('linkedin')" />
        </div>
      </div>
      <div class="article-content" v-html="contentDetail"></div>
    </div>
    <!-- 侧边栏服务 -->
    <Dangling v-if="locale == 'zh-CN'" />
    <!-- WhatsApp -->
    <!-- <WhatsApp v-if="locale == 'en-US'" /> -->
    <!-- 在线客服 -->
    <Connect />
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "NewsDetail",
  layout: "Layout",
  components: {},
  data() {
    return {
      hostUrl: "",
      routeUrl: ""
    }
  },
  head() {
    return {
      title: this.$i18n.t("headTitle"),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$i18n.t("haeaKeyContent")
        },
        {
          hid: "description",
          name: "description",
          content: this.$i18n.t("haeaDecContent")
        },
        {
          property: "og:title",
          content: `${this.articleDetail.title}`
        },
        {
          property: "og:description",
          content: `${this.articleDetail.title}`
        },
        {
          property: "og:url",
          content: `${this.hostUrl}${this.routeUrl}`
        },
        {
          property: "og:image",
          content: `${this.articleDetail.imageUrl}`
        }
      ]
    }
  },
  async asyncData({ app, params }) {
    let paramsRes = params.detailParams
    console.log("paramsRes", paramsRes)
    let categoryId = paramsRes
    let articleDetail = null,
      contentDetail = ""
    try {
      let { data } = await app.$api.articleDetail({ id: categoryId })
      articleDetail = data
      // 富文本内容
      let element = data.content
      // 使用/\d+px/g匹配到数字+px的字符串
      element = element.replace(/\d+px/g, (str) => {
        let pixel = +str.split("px")[0]
        let rem = pixel / 19.2
        return rem + "vw"
      })
      contentDetail = element
    } catch (error) {
      console.log(error)
    }
    return {
      articleDetail,
      contentDetail
    }
  },
  props: {},
  computed: { ...mapState(["locale"]) },
  async mounted() {
    this.currentUrl()
    this.getPoint()
  },
  methods: {
    currentUrl() {
      setTimeout(() => {
        if (process.client) {
          this.hostUrl = `${window.location.host}`
          this.routeUrl = `${this.$route.fullPath}`
        }
      }, 1000)
    },
    mediaShare(type) {
      let linkUrl = ""
      let url = encodeURIComponent(`${window.location.host}${this.$route.fullPath}`)
      this.articleShare(type) //文章转发
      if (type == "facebook") {
        linkUrl = `http://www.facebook.com/sharer.php?u=${url}&t=${this.articleDetail.title}`
        _hmt.push(["_trackEvent", "button", "click", `分享文章到facebook，文章ID-${this.articleDetail.id}`])
      } else if (type == "twitter") {
        linkUrl = `https://twitter.com/intent/tweet?url=${url}&title=${this.articleDetail.title}`
        _hmt.push(["_trackEvent", "button", "click", `分享文章到twitter，文章ID-${this.articleDetail.id}`])
      } else if (type == "linkedin") {
        linkUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${this.articleDetail.title}`
        _hmt.push(["_trackEvent", "button", "click", `分享文章到linkedin，文章ID-${this.articleDetail.id}`])
      }
      window.open(linkUrl, "_blank")
    },
    articleShare(type) {
      this.$api.articleShare({ id: this.articleDetail.id, shareSource: type })
    },
    async getPoint() {
      let params = await this.$optionPoint.sendUrl(window, navigator, document)
      this.$api.burySave({ ...params }).then((res) => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.news-detail {
  .bread-crumb {
    margin-top: 30px;
  }
  .article-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 28px;
    color: #333;
    line-height: 34px;
    text-align: center;
    margin-top: 30px;
  }
  .artInfo-info-share {
    padding: 20px 0;
    border-bottom: 1px solid #d9d9d9;
    position: relative;
    &::after {
      content: "";
      display: block;
      height: 3px;
      background: #cbcbcb;
      width: 100px;
      position: absolute;
      bottom: -2px;
      left: 50%;
      margin: 0 0 0 -50px;
      z-index: 1;
    }
    .artInfo {
      display: flex;
      align-items: center;
      justify-content: center;
      .view-area {
        display: flex;
        align-items: center;
        span {
          font-size: 12px;
          color: #666666;
          line-height: 20px;
          margin-left: 5px;
        }
      }
      .margin-l {
        margin-left: 20px;
      }
    }
    .info-share {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      img {
        width: 40px;
        height: 40px;
        cursor: pointer;
      }
    }
  }
  .article-content {
    margin-top: 20px;
    margin-bottom: 60px;
    ::v-deep img {
      display: inline-block;
    }
    ::v-deep video {
      width: 100%;
    }
  }
}
</style>
